<template>
  <div class="app-container">
    <div class="mapDiv" v-loading="loading">
      <!--地图-->
      <IndexMap v-if="completeRefreshData==true"
                :allRadioIndexData="allRadioIndexData"
                :allListData="allListData"
                :typeCodeDataList="typeCodeDataList"
                :resetClearAllBool="resetClearAllBool"
                :dataTypeInfoArray="dataTypeInfoArray"
                @getDetailDataById="getDetailDataById"
                @getLegendHtml="getLegendHtml"
      ></IndexMap>
    </div>
    <div id="indexMap-mapDiv" class="ol-popup">
      <div class="select">
        <div class="selectData"><span>选择数据</span><el-icon style="cursor:pointer;" :size="23" @click="hideTabBoxDiv"><Expand /></el-icon></div>
      </div>
      <!--选择数据收起div-->
      <div class="box-hide-div" v-if="boxshow==false">
        <span class="box-hide-div-label-span">当前选择：</span>
        <span class="box-hide-div-text-span" v-if="queryParams.dataRangeText!='' || queryParams.dataLayerText!=''">
          {{ queryParams.dataRangeText }}，{{ queryParams.dataLayerText }}
        </span>
      </div>
      <!--选择数据展开div-->
      <div class="box" :class="versionCodeDivShow?'box-max':'box-min'" v-if="boxshow==true">
        <!--选择数据内容div-->
        <div style="position:absolute;top:0px;left:0px;bottom:40px;width:400px;">
          <!--tab标签页-->
          <div class="tab-div">
            <div class="tab-button" :class="activeName=='版本范围'?'tab-active':'tab-no'" @click="showDataRangeTab">
              版本范围
            </div>
            <div class="tab-button" :class="activeName=='数据图层'?'tab-active':'tab-no'" @click="showDataLayerTab">
              数据图层
            </div>
          </div>
          <!--tab内容div-->
          <div class="tab-content-all-div">
            <!--版本范围tab内容-->
            <div v-if="activeName=='版本范围'" class="tab-content">
              <span class="tab-span" @click="hideTabBoxDiv">收起</span>
              <div style="position:absolute;top:40px;left:20px;right:20px;bottom:0px;">
                <el-radio-group v-model="queryParams.dataRangeCountry" @change="changeRadio" style="margin-bottom: 20px;">
                  <el-radio label="1">国家级数据</el-radio>
                  <el-radio label="2">省级数据</el-radio>
                </el-radio-group>
                <el-form :model="queryParams" ref="queryRef" label-width="50px" :rules="rules">
                  <el-row>
                    <el-col>
                      <el-form-item label="省" prop="dataRangeProvince">
                        <el-select v-model="queryParams.dataRangeProvince" placeholder="请选择" @change="chooseProvince" clearable
                                   :disabled="disabled1==true">
                          <el-option key="全国" label="全国" value="全国" v-if="queryParams.dataRangeCountry == '1'"></el-option>
                          <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col>
                      <el-form-item label="市" prop="dataRangeCity">
                        <el-select v-model="queryParams.dataRangeCity" placeholder="请选择" @change="chooseCity" clearable
                                   :disabled="queryParams.dataRangeProvince=='全国'">
                          <el-option key="全部" label="全部" value="全部" v-if="cityData&&cityData.length>0"></el-option>
                          <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col>
                      <el-form-item label="区/县" prop="dataRangeArea">
                        <el-select v-model="queryParams.dataRangeArea" placeholder="请选择" @change="chooseArea" clearable
                                   :disabled="queryParams.dataRangeProvince=='全国' || queryParams.dataRangeCity=='全部'">
                          <el-option key="全部" label="全部" value="全部" v-if="areaData&&areaData.length>0"></el-option>
                          <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div style="float: right;margin-right: 50px;">
                  <el-button type="primary" @click="submitSelect">确定</el-button>
                  <el-button @click="resetSelect">重置</el-button>
                </div>
              </div>
            </div>
            <!--数据图层tab内容-->
            <div v-if="activeName=='数据图层'" class="tab-content">
              <!--版本范围当前选择div-->
              <div style="width:100%;height:80px;background:rgb(230 242 253);overflow: hidden;">
                <span class="tab-span" @click="showDataRangeTab">展开</span>
                <span class="tab-layercollapse-allHide-label-span">当前选择：</span><br/>
                <span class="tab-layercollapse-allHide-text-span">
                  {{ queryParams.dataRangeText }}
                </span>
              </div>
              <!--数据图层当前选择div（展开）-->
              <div v-if="collapseData.showHideBool==true" class="tab-layercollapse-allShow">
                <div class="tab-layercollapse-allShow-head">
                  <span class="tab-span" @click="hideCollapseDiv">收起</span>
                  <span class="tab-span" @click="resetCollapseDiv" >重置</span>
                </div>
                <!--数据图层类型选择div-->
                <div class="tab-layercollapse-div">
                  <el-radio-group v-model="activeRadioLabel" @change="radioChange" style="display: block;">
                    <el-collapse v-model="activeNames" @change="handleChange">
                      <el-collapse-item v-for="item in collapseLayerData" :title="item.label" :name="item.value" class="tab-layercollapse-header">
                        <div v-for="child in item.children" class="tab-collapse-radioDiv">
                          <el-radio :label="child.radioLabel">{{child.name}}</el-radio>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </el-radio-group>
                </div>
              </div>
              <!--数据图层当前选择div（收起）-->
              <div v-if="collapseData.showHideBool==false" class="tab-layercollapse-allHide">
                <span class="tab-span" @click="collapseData.showHideBool=true">展开</span>
                <span class="tab-layercollapse-allHide-label-span">当前选择：</span><br/>
                <span class="tab-layercollapse-allHide-text-span">
                  {{ queryParams.dataLayerText }}
                </span>
              </div>
              <!--重置div-->
              <div v-if="collapseData.showHideBool==false">
                <span style="float: right;margin:10px;color: #107ce5;cursor: pointer;font-size: 14px;" @click="resetAllCollapseDiv" >重置</span>
              </div>
            </div>
          </div>
        </div>
        <!--底部收起按钮div-->
        <div class="foot-div" @click="hideTabBoxDiv">
          <svg-icon style="width:100%;height:100%;" class-name="arrow_drop_up-icon" icon-class="arrow_drop_up" />
        </div>
        <!--选择数据版本号div-->
        <div class="tab-select-versionCode-div" v-if="versionCodeDivShow">
          <el-input v-model="queryParams.dataTypeCodeSearchText" @change="querySysDataVersion" size="large" placeholder="请输入版本号" prefix-icon="Search"/>
          <p style="height:20px;color:black;font-weight: bold;">{{collapseData.layerName}}数据</p>
          <div class="tab-table-div">
            <el-table :data="versionCodeTableData" ref="versionCodeTable" @row-click="clickRow"
                      @select="handleSelectionChange" stripe style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="versionCode" label="版本号" width="190" />
              <el-table-column prop="uploadTime" label="上传时间" width="120" />
              <el-table-column align="right" width="50">
                <template #header></template>
                <template #default="scope">
                  <!--版本信息-->
                  <el-popover placement="right" :width="210" trigger="hover">
                    <template #reference>
                      <div style="height: 20px;">
                        <svg-icon style="width:100%;height:100%;" class-name="three_point_new-icon" icon-class="three_point_new" />
                      </div>
                    </template>
                    <template #default>
                      <p style="height: 20px;line-height: 20px;margin: 0px;font-weight: bold;">版本信息</p>
                      <el-divider style="margin:10px 0;" />
                      <p style="font-weight: bold;">版本说明：</p>
                      <p style="max-height: 200px;overflow: auto;">{{ scope.row.versionDesc }}</p>
                      <p style="font-weight: bold;">数据说明：</p>
                      <p style="max-height: 200px;overflow: auto;">{{ scope.row.dataDesc }}</p>
                      <p><span style="font-weight: bold;">上传人：</span>{{scope.row.uploadUser}}</p>
                    </template>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!--根据版本查询图层数据信息表格-->
      <!--基础数据信息表格-->
      <IndexTable v-if="resetClearAllBool==false && allTableDataBool==true"
                  :allTableDataBool="allTableDataBool"
                  :isSpatialDataBool="isSpatialDataBool"
                  :currentLayerName="currentLayerName"
                  :currentLayerCode="currentLayerCode"
                  :currentVersionCode="currentVersionCode"
                  :allTableDataList="allTableDataList"
                  :allTableTitleList="allTableTitleList"
                  :selectId="selectId"
                  :total="total"
      ></IndexTable>
      <!--图层图例-->
      <div v-if="showHideLegendDivBool" class="layerMap-legend">
        <!--滚动条-->
        <el-scrollbar max-height="500px">
          <p>图例</p>
          <div v-for="item in layerShowHideArray" :key="item.code" v-show="item.show" v-html="item.legendHtml">
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
//地图
import IndexMap from '@/map/dataManage/basicData/indexMap.vue';
import IndexTable from '@/map/dataManage/basicData/indexTable.vue';
import { getProvince, getChildArea } from "@/api/system/division";
import { getDataTypeTree, getSysDataVersion, queryDataByVersionCode,queryDataById } from "@/api/datamanage/basicData/indexMap.js";
import { ElMessageBox } from 'element-plus'
import { getUserId } from '@/utils/auth'
import { getAdmin } from '@/api/datamanage/sysData/administrativeArea.js'
import { iServerHttp } from "@/map/projMap.js"

const { proxy } = getCurrentInstance();
const props = defineProps(['dataType']);
const level2DataType = ref("");//数据类别二级code
const loading = ref(false);
const activeName = ref("版本范围");
const activeNames = ref("0");//数据图层类型选择div默认展开的序号
const activeRadioLabel = ref(null);//激活显示版本号选择div的图层radio序号
const boxshow = ref(false);//是否显示选择数据div
const versionCodeDivShow = ref(false);//是否显示选择版本号div
const resetClearAllBool = ref(false);//是否重置清空全部图层数组
const versionCodeTableData = ref([]);//查询版本号数据列表
const addDataType = ref("");//选择添加数据类别
const isAllAdmin = ref(true);//是否国家级管理员
const isCountryId = ref('');//省级管理员的省份ID
const disabled1 = ref(false);//是否省份固定
const provinceData = ref([]);//省
const cityData = ref([]);//市
const areaData = ref([]); //区、县
//数据图层显示列表
const collapseLayerData = ref([]);
const selectdatas = ref([]);//勾选的数据
//添加数据
const addDataShowDivBool = ref(false);
const tempAllTableDataList = ref([]);//临时图层数据

/*地图传参start*/
const completeRefreshData = ref(false);//防止刷新后地图不显示
const allListData = ref([]);//地图显示数据列表
const allRadioIndexData = ref([]);//全部序号列表
//选择图层的版本号数据列表
const typeCodeDataList = ref([]);
//是否显示图层表格数据列表
const allTableDataBool = ref(false);
//图层表格数据列表
const allTableDataList = ref([]);
//表头字段数据列表
const allTableTitleList = ref([]);
//是否为空间数据
const isSpatialDataBool = ref(false);
//总数据量
const total = ref(0);
//当前数据类型图层名称
const currentLayerName = ref("");
//当前数据类型code
const currentLayerCode = ref("");
//当前数据版本号
const currentVersionCode = ref("");
//选中1条数据的ID
const selectId = ref("");
//数据类型
const dataTypeInfoArray = ref([
  {database:"datacenter", name: '省级行政区', radioLabel: '57', code: 'sjxzq', table:"jc_boua2",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_boua2@datacenter",zIndex:6,fieldId:"jb_id"},
  {database:"datacenter", name: '地级行政区', radioLabel: '58', code: 'djxzq', table:"jc_boua4",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_boua4@datacenter",zIndex:6,fieldId:"jb_id"},
  {database:"datacenter", name: '县级行政区', radioLabel: '59', code: 'xjxzq', table:"jc_boua5",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_boua5@datacenter",zIndex:6,fieldId:"jb_id"},
  {database:"datacenter", name: '乡级行政区', radioLabel: '60', code: 'xjxzq1', table:"jc_boua6",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_boua6@datacenter",zIndex:6,fieldId:"jb_id"},
  {database:"datacenter", name: '省级行政中心', radioLabel: '61', code: 'sjxzzx', table:"jc_resp_province",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_resp_province@datacenter",zIndex:8,fieldId:"jrp_id"},
  {database:"datacenter", name: '地级行政中心', radioLabel: '62', code: 'djxzzx', table:"jc_resp_city",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_resp_city@datacenter",zIndex:8,fieldId:"jrc_id"},
  {database:"datacenter", name: '县级行政中心', radioLabel: '63', code: 'xjxzzx', table:"jc_resp_county",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_resp_county@datacenter",zIndex:8,fieldId:"jrc_id"},
  {database:"datacenter", name: '乡级行政中心', radioLabel: '64', code: 'xjxzzx1', table:"jc_resp_town",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_resp_town@datacenter",zIndex:8,fieldId:"jrt_id"},
  {database:"datacenter", name: '行政村所在地', radioLabel: '65', code: 'xzcszd', table:"jc_resp_village",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_resp_village@datacenter",zIndex:8,fieldId:"jrv_id"},
  {database:"datacenter", name: '遥感', radioLabel: '66', code: 'yg1', table:"jc_remote_sensing",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_remote_sensing@datacenter",zIndex:6,fieldId:"jrs_id"},
  // {database:"datacenter", name: '气候', radioLabel: '67', code: 'qh', table:"jc_climate", fieldId:"jc_id", spaceBool: false},
  {database:"demtif", name: 'DEM高程数据', code: 'demgcsj', table:"",url:iServerHttp()+"/iserver/services/map-demtif/rest/maps/",zIndex:6,fieldId:""},
  {database:"datacenter", name: '水系（点）', radioLabel: '69', code: 'sxd', table:"jc_hydp",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_hydp@datacenter",zIndex:8,fieldId:"jh_id"},
  {database:"datacenter", name: '水系（线）', radioLabel: '70', code: 'sxx', table:"jc_hydl",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_hydl@datacenter",zIndex:7,fieldId:"jh_id"},
  {database:"datacenter", name: '水系（面）', radioLabel: '71', code: 'sxm', table:"jc_hyda",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_hyda@datacenter",zIndex:6,fieldId:"jh_id"},
  {database:"datacenter", name: '场地类别', radioLabel: '72', code: 'cdlb1', table:"jc_site_category",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_site_category@datacenter",zIndex:8,fieldId:"jsc_id"},
  {database:"datacenter", name: '地震台站', radioLabel: '73', code: 'dztz', table:"jc_observation_station",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_observation_station@datacenter",zIndex:8,fieldId:"jos_id"},
  {database:"datacenter", name: '地质灾害危险点', radioLabel: '74', code: 'dzzhwxd', table:"jc_dangerous_spot",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_dangerous_spot@datacenter",zIndex:8,fieldId:"jds_id"},
  // {database:"datacenter", name: '钻孔', radioLabel: '76', code: 'y02ckxx', table:"jc_rfcp_y02", fieldId:"id", spaceBool: false},
  {database:"datacenter", name: '断层', radioLabel: '93', code: 'dc', table:"jc_fault",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_fault@datacenter",zIndex:7,fieldId:"id"},
  // {database:"datacenter", name: '地层岩性', radioLabel: '94', code: 'dcyx1', table:"jc_stratum_lithology",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_stratum_lithology@datacenter",zIndex:6,fieldId:"id"},
  {database:"datacenter", name: '地层岩性', radioLabel: '94', code: 'dcyx1', table:"jc_stratum_lithology",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/地层岩性",zIndex:6,fieldId:"id"},
  {database:"datacenter", name: '危险性数据PGA点', radioLabel: '95', code: 'wxxsjpgad', table:"jc_dangerous_pga",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_dangerous_pga@datacenter",zIndex:8,fieldId:"id"},
  {database:"datacenter", name: '危险性数据等级点', radioLabel: '96', code: 'wxxsjdjd', table:"jc_dangerous_leveld",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_dangerous_leveld@datacenter",zIndex:8,fieldId:"id"},
  {database:"datacenter", name: '危险性数据等级面', radioLabel: '97', code: 'wxxsjdjm', table:"jc_dangerous_levelm",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_dangerous_levelm@datacenter",zIndex:6,fieldId:"id"},
  {database:"datacenter", name: '历史4 3/4以上强震目录', radioLabel: '98', code: 'ls434ysqzml', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:6,fieldId:"jsc_id"},
  {database:"datacenter", name: '1970年以来小震目录', radioLabel: '99', code: '1970nylxzml', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:6,fieldId:"jic_id"},
  {database:"datacenter", name: 'PGA_002', radioLabel: '100', code: 'pga002', table:"jc_pga_002",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_pga_002@datacenter",zIndex:6,fieldId:"jp_id"},
  {database:"datacenter", name: 'PGA_010', radioLabel: '101', code: 'pga010', table:"jc_pga_010",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_pga_010@datacenter",zIndex:6,fieldId:"jp_id"},
  {database:"datacenter", name: 'PGA_063', radioLabel: '102', code: 'pga063', table:"jc_pga_063",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_pga_063@datacenter",zIndex:6,fieldId:"jp_id"},
  {database:"datacenter", name: '特征周期（面属性）_002', radioLabel: '103', code: 'tzzqmsx002', table:"jc_features_period_002",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_features_period_002@datacenter",zIndex:6,fieldId:"jfp_id"},
  {database:"datacenter", name: '特征周期（面属性）_010', radioLabel: '104', code: 'tzzqmsx010', table:"jc_features_period_010",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_features_period_010@datacenter",zIndex:6,fieldId:"jfp_id"},
  {database:"datacenter", name: '特征周期（面属性）_063', radioLabel: '105', code: 'tzzqmsx063', table:"jc_features_period_063",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_features_period_063@datacenter",zIndex:6,fieldId:"jfp_id"},
  {database:"datacenter", name: '地震综合等震线', radioLabel: '1628300973179527168', code: 'dzzhdzx1', table:"jc_comprehensive_isoseismal",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_comprehensive_isoseismal@datacenter",zIndex:7,fieldId:"id"},
  // {database:"datacenter", name: '震害调查', radioLabel: '106', code: 'zhdc1', table:"jc_earthquake_damage_survey", fieldId:"jeds_id", spaceBool: false},
  // {database:"datacenter", name: '2000年以来的震害与救灾案例', radioLabel: '107', code: '2000nyldzhyjzal', table:"jc_disaster_case", fieldId:"jdc_id", spaceBool: false},
  {database:"datacenter", name: '危化企业', radioLabel: '108', code: 'whqy1', table:"jc_dangerous_enterprise",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_dangerous_enterprise@datacenter",zIndex:8,fieldId:"jde_id"},
  {database:"datacenter", name: '加油（加气）站', radioLabel: '109', code: 'jyjqz1', table:"jc_lfcp_gas_station",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_lfcp_gas_station@datacenter",zIndex:8,fieldId:"jgs_id"},
  {database:"datacenter", name: '危险化学品、放射危险源', radioLabel: '110', code: 'wxhxpfswxy', table:"jc_dangerous_source",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_dangerous_source@datacenter",zIndex:8,fieldId:"jds_id"},
  {database:"datacenter", name: '城市避难场所', radioLabel: '111', code: 'csbncs', table:"jc_emergcy_shelter",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_emergcy_shelter@datacenter",zIndex:8,fieldId:"jes_id"},
  {database:"datacenter", name: '物资储备库', radioLabel: '112', code: 'wzcbk', table:"jc_material_reserve",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_material_reserve@datacenter",zIndex:8,fieldId:"jmr_id"},
  {database:"datacenter", name: '专业应急救援队伍', radioLabel: '113', code: 'zyyjjydw', table:"jc_professional_relief",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_professional_relief@datacenter",zIndex:8,fieldId:"jpr_id"},
  // {database:"datacenter", name: '地震应急预案表', radioLabel: '114', code: 'dzyjyab', table:"jc_emergcy_plan", fieldId:"jep_id", spaceBool: false},
  {database:"datacenter", name: '建筑物格网数据', radioLabel: '115', code: 'jzwgwsj', table:"jc_ds_gpb_gdzc_grid_total_housing",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_ds_gpb_gdzc_grid_total_housing@datacenter",zIndex:6,fieldId:"jdgggth_id"},
  {database:"datacenter", name: '城镇住宅', radioLabel: '116', code: 'czzz', table:"jc_risk_census_city_house",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_risk_census_city_house@datacenter",zIndex:6,fieldId:"jrcch_id"},
  {database:"datacenter", name: '城镇非住宅', radioLabel: '117', code: 'czfzz', table:"jc_risk_census_city_non_house",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_risk_census_city_non_house@datacenter",zIndex:6,fieldId:"jrccnh_id"},
  {database:"datacenter", name: '农村住宅（独立住宅）', radioLabel: '118', code: 'nczzdlzz', table:"jc_risk_census_country_dl_house",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_risk_census_country_dl_house@datacenter",zIndex:6,fieldId:"jrccdh_id"},
  {database:"datacenter", name: '农村住宅（集合住宅）', radioLabel: '119', code: 'nczzjhzz', table:"jc_risk_census_country_jh_house",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_risk_census_country_jh_house@datacenter",zIndex:6,fieldId:"jrccjh_id"},
  {database:"datacenter", name: '辅助用房', radioLabel: '120', code: 'fzyf', table:"jc_risk_census_country_fz_house",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_risk_census_country_fz_house@datacenter",zIndex:6,fieldId:"jrccfh_id"},
  {database:"datacenter", name: '农村非住宅', radioLabel: '121', code: 'ncfzz', table:"jc_risk_census_country_non_house",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_risk_census_country_non_house@datacenter",zIndex:6,fieldId:"jrccnh_id"},
  {database:"datacenter", name: '房屋抗震能力分区', radioLabel: '122', code: 'fwkznlfq', table:"jc_house_earthquake",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_house_earthquake@datacenter",zIndex:6,fieldId:"jhe_id"},
  {database:"datacenter", name: '铁路分布图', radioLabel: '123', code: 'tlfbt', table:"jc_lrrl",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_lrrl@datacenter",zIndex:7,fieldId:"jl_id"},
  {database:"datacenter", name: '道路', radioLabel: '124', code: 'dl1', table:"jc_lrdl",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_lrdl@datacenter",zIndex:7,fieldId:"jl_id"},
  {database:"datacenter", name: '桥梁', radioLabel: '125', code: 'ql1', table:"jc_lfcl_bridge",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_lfcl_bridge@datacenter",zIndex:7,fieldId:"jlb_id"},
  {database:"datacenter", name: '隧道', radioLabel: '126', code: 'sd1', table:"jc_lfcl_tunnel",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_lfcl_tunnel@datacenter",zIndex:7,fieldId:"jlt_id"},
  {database:"datacenter", name: '机场', radioLabel: '127', code: 'jc1', table:"jc_airport",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_airport@datacenter",zIndex:8,fieldId:"ja_id"},
  {database:"datacenter", name: '直升机停机坪', radioLabel: '128', code: 'zsjtjp', table:"jc_tarmac",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_tarmac@datacenter",zIndex:8,fieldId:"jt_id"},
  {database:"datacenter", name: '车站', radioLabel: '129', code: 'cz1', table:"jc_lfcp_station",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_lfcp_station@datacenter",zIndex:8,fieldId:"jls_id"},
  {database:"datacenter", name: '学校表', radioLabel: '130', code: 'xxb', table:"jc_rfcp_school",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_rfcp_school@datacenter",zIndex:8,fieldId:"js_id"},
  {database:"datacenter", name: '医院', radioLabel: '131', code: 'yy1', table:"jc_rfcp_hospital",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_rfcp_hospital@datacenter",zIndex:8,fieldId:"jh_id"},
  {database:"datacenter", name: '尾矿库', radioLabel: '132', code: 'wkk1', table:"jc_tailings_pond",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_tailings_pond@datacenter",zIndex:8,fieldId:"jtp_id"},
  {database:"datacenter", name: '旅游景点', radioLabel: '133', code: 'lyjd', table:"jc_tourism_spot",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_tourism_spot@datacenter",zIndex:8,fieldId:"jts_id"},
  {database:"datacenter", name: '文物保护单位', radioLabel: '134', code: 'wwbhdw', table:"jc_landmark",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_landmark@datacenter",zIndex:8,fieldId:"jl_id"},
  {database:"datacenter", name: '水库', radioLabel: '135', code: 'sk1', table:"jc_reservior",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_reservior@datacenter",zIndex:8,fieldId:"jr_id"},
  {database:"datacenter", name: '油气管线', radioLabel: '136', code: 'yqgx', table:"jc_pipl",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_pipl@datacenter",zIndex:7,fieldId:"jp_id"},
  // {database:"datacenter", name: '人口统计表', radioLabel: '137', code: 'rktjb', table:"jc_population", fieldId:"jp_id", spaceBool: false},
  {database:"datacenter", name: '人口公里网格数据', radioLabel: '138', code: 'rkglwgsj', table:"jc_population_grid",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_population_grid@datacenter",zIndex:6,fieldId:"id"},
  // {database:"datacenter", name: '国民经济统计表', radioLabel: '139', code: 'gmjjtjb', table:"jc_economy", fieldId:"id", spaceBool: false},
  {database:"datacenter", name: '国民生产总值', radioLabel: '140', code: 'gmsczz', table:"jc_gdp",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_gdp@datacenter",zIndex:6,fieldId:"id"},
]);
/*地图传参end*/

const dataRangeProvinceCheck = (rule, value, callback) => {
  if (!value) {
    //if (!value && queryParams.value.dataRangeCountry == "2") {
    callback(new Error('请选择省'))
  } else if (value == undefined && queryParams.value.dataRangeCountry == undefined) {
    callback()
  } else {
    callback()
  }
}

const data = reactive({
  queryParams: {
    dataTypeCode: '',
    dataRangeCountry: '1',
    dataRangeProvince: '全国',
    dataRangeCity: '',
    dataRangeArea:'',
    dataRangeText:'',//版本范围当前选择内容
    dataLayerText:'',//数据图层当前选择内容
    dataTypeCodeSearchText:'',//搜索版本号输入框文本
  },
  queryParamsNew: {
    dataRangeProvince: '',//省ID
    dataRangeCity: '',//市ID
    dataRangeArea:'',//区县ID
  },
  form: {
    banben: '保存新版本',
    dataScope: '1',
    type: '1',
    dataFileId: [],
    versionCode: '',
  },
  formData: {
    dataScope: '1',
    type: '1',
  },
  rules: {
    dataRangeCountry: [{ required: true, message: "数据级别不能为空", trigger: "change" }],
    dataRangeProvince: [{ required: true, message: "省不能为空", trigger: "change", validator: dataRangeProvinceCheck }],
    dataType: [{ required: true, message: "数据类别不能为空", trigger: "change" }],
    dataType2: [{ required: true, message: "子数据类别不能为空", trigger: "change" }],
    dataName: [{ required: true, message: "数据名称不能为空", trigger: "blur" }],
    dataDesc: [{ required: true, message: "数据说明不能为空", trigger: "blur" }],
    versionCode: [{ required: true, message: "版本号不能为空", trigger: "change" }],
    versionTime: [{ required: true, message: "版本日期不能为空", trigger: "change" }],
    versionDesc: [{ required: true, message: "版本说明不能为空", trigger: "blur" }],
    updateDesc: [{ required: true, message: "更新说明不能为空", trigger: "blur" }],
    dataFileIds: [{ required: true, message: "数据文件不能为空", trigger: "blur" }],
    dataFrom: [{ required: true, message: "数据来源不能为空", trigger: "blur" }],
    uploadSource: [{ required: true, message: "数据来源不能为空", trigger: "blur" }],
    spatialDataType: [{ required: true, message: "空间数据类型不能为空", trigger: "blur" }],
    // projectionInfo: [{ required: true, message: "投影信息不能为空", trigger: "blur" }],
    fieldNum: [{ required: true, message: "字段个数不能为空", trigger: "blur" }, { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数！', trigger: 'change' }],
    fieldEntry: [{ required: true, message: "字段条目不能为空", trigger: "blur" }, { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数！', trigger: 'change' }],
  },
  rulesNew:{
    dataRangeProvince: [{ required: true, message: "省不能为空", trigger: "change", validator: dataRangeProvinceCheck }],
  },
  collapseData:{
    showHideBool:true,
    layerName:'',//选中图层名称
  },
  typeCodeInfo:{
    //typeInfo:'针对本版本说明文字，限制300字以内',//版本说明
    typeInfo:'针对本版本说明文字，限制300字以内,针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，',
    //dataInfo:'针对本数据说明文字，限制300字以内',//数据说明
    dataInfo:'针对数据说明文字，限制300字以内,针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，',
    uploadUser:'张三',//上传人
  }
})
const { queryParams, queryParamsNew, form, rules, rulesNew, formData,collapseData,typeCodeInfo } = toRefs(data);

// 改变版本范围
const changeRadio = (value)=>{
  if(value=="1"){//国家级
    queryParams.value.dataRangeProvince = "全国";
    queryParams.value.dataRangeCity = "";
    queryParams.value.dataRangeArea = "";
    queryParamsNew.value.dataRangeProvince = "";
    queryParamsNew.value.dataRangeCity = "";
    queryParamsNew.value.dataRangeArea = "";
    disabled1.value = false;
    isAdminCountryId1()
  }else{//省级
    queryParams.value.dataRangeProvince = "";
    queryParams.value.dataRangeCity = "";
    queryParams.value.dataRangeArea = "";
    queryParamsNew.value.dataRangeProvince = "";
    queryParamsNew.value.dataRangeCity = "";
    queryParamsNew.value.dataRangeArea = "";
    //权限控制
    isAdminCountryId();
  }
}

//权限控制
function isAdminCountryId(){
  if(!isAllAdmin.value){
    disabled1.value = true;
    let list = provinceData.value;
    for(let i=0;i<list.length;i++){
      if(list[i].id==isCountryId.value){//省份
        queryParamsNew.value.dataRangeProvince = list[i].id;
        queryParams.value.dataRangeProvince = list[i].name;
        getChildArea(list[i].id).then(response => {
          cityData.value = response.data;
        });
        break;
      }
    }
    areaData.value = [];
  }else{
    disabled1.value = false;
    cityData.value = [];
    areaData.value = [];
  }
}
function isAdminCountryId1(){
  if(!isAllAdmin.value){
    provinceData.value=provinceData.value.filter(item=>item.id==isCountryId.value);
  }
}

const showDataRangeTab = (value)=>{
  activeName.value = '版本范围';
  //收起数据图层
  hideCollapseDiv();
}

const showDataLayerTab = (value)=>{
  if(queryParams.value.dataRangeText==""){
    proxy.$modal.msgWarning("请先设置版本范围");
  }else{
    activeName.value = '数据图层';
  }
}

//确定版本范围
const submitSelect = (value)=>{
  proxy.$refs["queryRef"].validate(valid => {
    if (valid) {
      //重置数据图层
      resetCollapseDiv();
      collapseData.value.showHideBool=true;//展开数据图层
      let country = queryParams.value.dataRangeCountry;
      if(country=="1"){
        country = "国家级数据";
      }else{
        country = "省级数据";
      }
      let province = isUndefined(queryParams.value.dataRangeProvince);
      let city = isUndefined(queryParams.value.dataRangeCity);
      let area = isUndefined(queryParams.value.dataRangeArea);
      queryParams.value.dataRangeText = country+"，"+province+city+area;
      activeName.value = '数据图层';
    }
  });
}

//判断是否无值则返回空字符串，“全部”返回空字符串
function isUndefined(value){
  if(value==undefined || value==null || value=='全部'){
    value = "";
  }
  return value;
}

//重置版本范围
const resetSelect = ()=>{
  proxy.resetForm("queryRef");
  queryParams.value.dataRangeProvince = "";
  queryParams.value.dataRangeCity = "";
  queryParams.value.dataRangeArea = "";
  queryParams.value.dataRangeText = "";
  queryParamsNew.value.dataRangeProvince = "";
  queryParamsNew.value.dataRangeCity = "";
  queryParamsNew.value.dataRangeArea = "";
  //版本范围当前选择内容
  let country = queryParams.value.dataRangeCountry;
  if(country=="1"){
    country = "国家级数据";
    queryParams.value.dataRangeProvince = "全国";//默认全国
    isAdminCountryId1()
  }else{
    country = "省级数据";
    //权限控制
    isAdminCountryId();
  }
  queryParams.value.dataRangeText = country;
}

/** 获取省列表 */
function getProvinceData() {
  getProvince().then(response => {
    provinceData.value = response.data;
  });
}
//选择省
function chooseProvince(value) {
  queryParams.value.dataRangeCity = "";
  queryParams.value.dataRangeArea = "";
  queryParamsNew.value.dataRangeCity = "";
  queryParamsNew.value.dataRangeArea = "";
  cityData.value = [];
  areaData.value = [];
  if(value==""){
    queryParamsNew.value.dataRangeProvince = "";
  }else{
    if(value=="全国"){
      queryParams.value.dataRangeProvince = value;
      queryParamsNew.value.dataRangeProvince = "";
    }else{
      let list = provinceData.value;
      for(let i=0;i<list.length;i++){
        if(list[i].name==value){
          queryParamsNew.value.dataRangeProvince = list[i].id;
          queryParams.value.dataRangeProvince = list[i].name;
          getChildArea(list[i].id).then(response => {
            cityData.value = response.data;
          });
          break;
        }
      }
    }
  }
}
//选择市
function chooseCity(value) {
  queryParams.value.dataRangeArea = "";
  queryParamsNew.value.dataRangeArea = "";
  areaData.value = [];
  if(value==""){
    queryParamsNew.value.dataRangeCity = "";
  }else{
    if(value=="全部"){
      queryParams.value.dataRangeCity = value;
      queryParamsNew.value.dataRangeCity = "";
    }else{
      let list = cityData.value;
      for(let i=0;i<list.length;i++) {
        if (list[i].name == value) {
          queryParamsNew.value.dataRangeCity = list[i].id;
          queryParams.value.dataRangeCity = list[i].name;
          getChildArea(list[i].id).then((response) => {
            areaData.value = response.data;
          });
          break;
        }
      }
    }
  }
}
//选择区县
function chooseArea(value){
  if(value==""){
    queryParamsNew.value.dataRangeArea = "";
  }else{
    if(value=="全部"){
      queryParams.value.dataRangeArea = value;
      queryParamsNew.value.dataRangeArea = "";
    }else{
      let list = areaData.value;
      for(let i=0;i<list.length;i++) {
        if (list[i].name == value) {
          queryParamsNew.value.dataRangeArea = list[i].id;
          queryParams.value.dataRangeArea = list[i].name;
        }
      }
    }
  }
}

const handleChange = (val) => {
  console.log(val)
}

//收起选择数据div
const hideTabBoxDiv = () => {
  if(boxshow.value){
    //收起数据图层
    hideCollapseDiv();
    boxshow.value = false;
  }else{
    boxshow.value = true;
  }
}

//收起数据图层
const hideCollapseDiv = () => {
  //获取数据图层当前选择内容
  getDataLayerText();
  collapseData.value.showHideBool=false;
  versionCodeDivShow.value = false;
  activeRadioLabel.value = null;
  queryParams.value.dataTypeCodeSearchText = "";//清空搜索内容
}

//重置数据图层
const resetCollapseDiv = () => {
  //清空图层选择的版本号列表
  let datalist = typeCodeDataList.value;
  for(let i=0;i<datalist.length;i++) {
    datalist[i].typeCodeSelectData = [];
  }
  activeRadioLabel.value = null;
  versionCodeDivShow.value = false;
  queryParams.value.dataLayerText = "";
  resetClearAllBool.value = true;//是否重置清空全部图层数组
  queryParams.value.dataTypeCodeSearchText = "";//清空搜索内容
  getLegendHtml(null);//清空图例
}

//重置数据图层和版本范围
const resetAllCollapseDiv = () => {
  //重置数据图层
  resetCollapseDiv();
  //重置版本范围
  //resetSelect();
  activeName.value = '版本范围';
}

//根据序号值获取版本数据
const getLayerInfoByRadioIndex = (radioLabel) => {
  let data = null;
  let datalist = typeCodeDataList.value;
  for(let i=0;i<datalist.length;i++){
    if(datalist[i].radioLabel==radioLabel){
      data = datalist[i];
      break;
    }
  }

  return data;
}

//图层选择绑定值变化时触发的事件
const radioChange = () => {
  console.log("图层选择");
  //隐藏选择版本号div
  versionCodeDivShow.value = false;
  queryParams.value.dataTypeCodeSearchText = "";//清空搜索内容
  versionCodeTableData.value = [];//清空表数据
  let radioLabel = activeRadioLabel.value;
  //根据序号值获取版本数据
  let data = getLayerInfoByRadioIndex(radioLabel);
  if(data!=null){
    //获取图层名称
    collapseData.value.layerName = data.name;
  }
  selectdatas.value = [];//清空勾选数据
  //查询版本列表
  querySysDataVersion();
}

//设置勾选的表数据
const changeState = () => {
  console.log("设置勾选的表数据");
  let radioLabel = activeRadioLabel.value;
  //根据序号值获取版本数据
  let data = getLayerInfoByRadioIndex(radioLabel);
  if(data!=null){
    console.log(data.typeCodeSelectData);
    //设置勾选的表数据
    selectdatas.value = data.typeCodeSelectData;
  }
  if(proxy.$refs.versionCodeTable){
    let tableData = versionCodeTableData.value;
    let selectDataArray = selectdatas.value;
    for (let i = 0; i < tableData.length; i++) {
      if (selectDataArray.indexOf(tableData[i]["versionCode"]) != -1) {//勾选
        proxy.$refs.versionCodeTable.toggleRowSelection(
            tableData[i],
            true
        );
      }else{//不勾选
        proxy.$refs.versionCodeTable.toggleRowSelection(
            tableData[i],
            false
        );
      }
    }
  }
}

//显示隐藏折叠面板
const showHideCollapse = (value) => {
  if(document.getElementById(value).style.display == "none"){
    document.getElementById(value).style.display = "block";
  }else{
    document.getElementById(value).style.display = "none";
  }
}

/** 单击选择行 */
function clickRow(row) {
  proxy.$refs.versionCodeTable.toggleRowSelection(row);
  //设置图层选择的版本号列表
  setActiveTypeCodeList(row);
}

/** 多选框选中数据 */
function handleSelectionChange(selecteds, row) {
  //设置图层选择的版本号列表
  setActiveTypeCodeList(row);
}

//设置图层选择的版本号列表（添加、移除）并查询图层数据
function setActiveTypeCodeList(row){
  let bool = false;//是否添加版本号
  //添加、移除版本号
  if (!selectdatas.value.includes(row.versionCode)) {
    selectdatas.value.push(row.versionCode);//添加
    bool = true;
  } else {
    selectdatas.value.forEach((id, index) => {
      if (id === row.versionCode) {
        selectdatas.value.splice(index, 1);//移除
      }
    });
    bool = false;
  }
  console.log(selectdatas.value);
  console.log("设置图层选择的版本号列表");
  console.log(row);
  let radioLabel = activeRadioLabel.value;
  //根据序号值获取版本数据
  let data = getLayerInfoByRadioIndex(radioLabel);
  if(data!=null){
    //设置图层对应的选择版本号列表
    data.typeCodeSelectData = selectdatas.value;
    //是否为空间数据
    isSpatialDataBool.value = data.spaceBool;
    resetClearAllBool.value = false;//是否重置清空全部图层数组
    if(data.spaceBool){//空间数据
      if(bool){//添加版本号
        //根据图层类型查询图层版本号数据
        //查询版本号对应图层数据
        getDataByVersionCode(row,true);
        /*
          let resultList = getTestDataList();
          allListData.value = [radioLabel,row.versionCode,resultList,true];
        */
      }else{//移除版本号s
        allListData.value = [radioLabel,row.versionCode,[],false];
        allTableDataBool.value = false;
        allTableDataList.value = [];//清空图层表格数据列表
        allTableTitleList.value = [];
      }
    }else{//非空间数据
      if(bool) {//添加版本号
        //查询版本号对应非空间数据
        getDataByVersionCode(row,false);
      }else{
        allTableDataBool.value = false;
        allTableDataList.value = [];//清空图层表格数据列表
        allTableTitleList.value = [];
      }
    }
  }
}

//测试数据
function getTestDataList(){
  let testList = [];
  for(let i=0;i<100;i++){
    let lon = Math.random()*100 +10;
    let lat = Math.random()*30 +10;
    let geomText = 'POINT('+lon+' '+ lat +')';
    let testData = {
      id:i,
      geomText:geomText
    }
    testList.push(testData);
  }

  return testList;
}

//获取数据图层当前选择内容
function getDataLayerText(){
  let text = "";
  let datalist = typeCodeDataList.value;
  for(let i=0;i<datalist.length;i++){
    let radioLabel = datalist[i].radioLabel;
    let selectArray = datalist[i].typeCodeSelectData;
    if(selectArray.length>0){
      //根据序号获取图层全名数组
      let fullNameArr = getLayerFullNameArr(radioLabel);
      if(fullNameArr.length==2){
        text += fullNameArr[0] + "/" + fullNameArr[1] + "，";
      }else{
        continue;
      }
      for(let j=0;j<selectArray.length;j++){
        let versionCode = selectArray[j];
        if(j>0){
          text += "，";
        }
        text += "版本号"+versionCode;
      }
      text += "；";
    }
  }
  queryParams.value.dataLayerText = text;
}

//根据序号获取图层全名数组
function getLayerFullNameArr(radioLabel){
  let fullNameArr = [];
  let list = collapseLayerData.value;
  for(let i=0;i<list.length;i++){
    let childList = list[i].children;
    for(let j=0;j<childList.length;j++){
      if(childList[j].radioLabel==radioLabel){
        let parentName = list[i].label;
        let layerName = childList[j].name;
        fullNameArr = [parentName,layerName];
        break;
      }
    }
  }

  return fullNameArr;
}

const alertSelect = () => {
  ElMessageBox.alert('请选择要展示的数据及版本', '系统提示', {
    confirmButtonText: '确定',
    callback: () => {
      boxshow.value = true;
    },
  })
}

//打开添加数据面板
const handleAdd = ()=>{
  if(addDataType.value!=""){
    addDataShowDivBool.value = true;
  }else{
    proxy.$modal.msgWarning("请先选择添加数据类别");
  }
}
//关闭添加数据面板
const closeAddData = ()=>{
  addDataShowDivBool.value = false;
}

//切换添加数据类型
const chooseAddDataType = ()=> {
  let tempType = addDataType.value;
  addDataType.value = "";
  nextTick(() => {
    addDataType.value = tempType;
  });
}

//获取数据图层显示列表
const getAllTreeData = (level2DataType)=>{
  /**
   * dictCode :类别code 数据类别的dictItemCode
   * 水系 sx
   * 地形地貌 高程demgc
   * 活断层 hdc
   * 道路 dl
   * 地层岩性 dcyx
   * 地震动峰值加速度数据 pgakj
   * 气候qx
   */
  //2级数据类别信息
  let dictItemId = "";
  let dictItemName = "";
  let dictItemCode = "";
  if(level2DataType=="sx"){
    dictItemId = "18";
    dictItemName = "水系";
    dictItemCode = "sx";
  }else if(level2DataType=="demgc"){
    dictItemId = "17";
    dictItemName = "DEM高程";
    dictItemCode = "demgc";
  }else if(level2DataType=="hdc"){
    dictItemId = "23";
    dictItemName = "活断层";
    dictItemCode = "hdc";
  }else if(level2DataType=="dl"){
    dictItemId = "42";
    dictItemName = "道路";
    dictItemCode = "dl";
  }else if(level2DataType=="dcyx"){
    dictItemId = "1611652492352294912";
    dictItemName = "地层岩性";
    dictItemCode = "dcyx";
  }else if(level2DataType=="pgakj"){
    dictItemId = "27";
    dictItemName = "PGA(空间)";
    dictItemCode = "pgakj";
  }
  if(dictItemCode){
    //查询数据类别树
    getDataTypeTree(dictItemCode).then((response) => {
      nextTick(() => {
        console.log("查询数据类别树");
        console.log(response.data);
        let list = response.data;
        let collapseLayerDataArray = [];
        let typeCodeDataArray = [];
        let allRadioIndexArray = [];
        let childrenData = [];
        if(list!=null && list.length>0){
          for(let i=0;i<list.length;i++){
            let data = list[i];
            childrenData.push({
              name: data.dictItemName,
              radioLabel: data.dictItemId,
              dictItemCode: data.dictItemCode,
              spaceBool:true,//是否空间数据
            });
            //选择图层的版本号数据列表
            typeCodeDataArray.push({
              name: data.dictItemName,
              radioLabel: data.dictItemId,
              dictItemCode: data.dictItemCode,
              spaceBool:true,//是否空间数据
              typeCodeSelectData:[],
            });
            //全部序号列表
            allRadioIndexArray.push(data.dictItemId);
          }
        }
        //数据类别信息
        let collapseData = {
          value:dictItemId,
          label: dictItemName,
          children: childrenData,
          dictItemCode: dictItemCode,
        };
        collapseLayerDataArray.push(collapseData);
        //默认展开显示
        activeNames.value = dictItemId;
        //数据图层显示列表
        collapseLayerData.value = collapseLayerDataArray;
        //选择图层的版本号数据列表
        typeCodeDataList.value = typeCodeDataArray;
        //全部序号列表
        allRadioIndexData.value = allRadioIndexArray;
        //显示地图模块
        completeRefreshData.value = true;
      });
    });
  }
}

//查询版本列表
const querySysDataVersion = ()=>{
  let params = {
    dataRangeCountry : queryParams.value.dataRangeCountry,//1-国家级， 2-省级
    dataRangeProvince : queryParamsNew.value.dataRangeProvince,//省份id
    dataRangeCity : queryParamsNew.value.dataRangeCity,//市id
    dataRangeArea : queryParamsNew.value.dataRangeArea,//区县id
    dataType2 : activeRadioLabel.value,//三级数据类别（数据表）id
    versionCode : queryParams.value.dataTypeCodeSearchText,//版本号
  }
  //查询版本列表
  getSysDataVersion(params).then((response) => {
    nextTick(() => {
      console.log("查询版本列表");
      console.log(response.data);
      //显示选择版本号div
      versionCodeDivShow.value = true;
      //测试数据
      // versionCodeTableData.value = response.data.list;
      versionCodeTableData.value = response.data;
      nextTick(() => {
        //设置勾选的表数据
        changeState();
      });
    });
  });
}

//查询版本号对应图层数据
const getDataByVersionCode = (row,spatialBool)=>{
  console.log("开始查询版本号对应图层数据");
  let typeCode = row.dataTypeLevel3Code;
  let versionCode = row.versionCode;
  /*let params = {
    typeCode : typeCode,//三级数据类别（数据表）code
    versionCode : versionCode,//版本号
    page:1,//页码
    rows:100,//分页数据量
  }*/
  allTableDataBool.value = false;
  allTableDataList.value = [];//清空图层表格数据列表
  allTableTitleList.value = [];
  //获取数据图层名称
  currentLayerName.value = getDictItemNameByCode(typeCode);
  //当前数据类型code
  currentLayerCode.value = typeCode;
  //当前数据版本号
  currentVersionCode.value = versionCode;
  //选中1条数据的ID
  selectId.value = "";
  loading.value = true;

  let params = {
    typeCode : typeCode,//三级数据类别（数据表）code
    versionCode : versionCode,//版本号
    page:1,//页码
    rows:10,//分页数据量
  }
  //查询版本号对应图层数据
  queryDataByVersionCode(params).then((response) => {
    nextTick(() => {
      console.log("查询版本号对应图层数据结果");
      console.log(response.data);
      let resultList = response.data;//data,title,page,rows,total,totalPage
      let totalPage = resultList.totalPage;
      allTableDataList.value = resultList.data;//图层表格数据列表
      allTableTitleList.value = resultList.title;//表头字段列表
      total.value = resultList.total;//总数据量
      let radioLabel = activeRadioLabel.value;
      if(spatialBool){//空间数据
        // allListData.value = [radioLabel,row.versionCode,resultList.data,true];//显示图层数据列表
        allListData.value = [radioLabel,row.versionCode,[],true];//显示超图图层
      }
      loading.value = false;
      allTableDataBool.value = true;//显示表格
    });
  }).catch(err => {
    loading.value = false;
  });


  //临时图层数据
  // tempAllTableDataList.value = [];
  //分页循环查询获取全部数据
  // getAllDataByPage(typeCode,versionCode,1,row,spatialBool);
}

//分页循环查询获取全部数据
const getAllDataByPage = (typeCode,versionCode,page,row,spatialBool) => {
  let rows = 200;
  if(typeCode=="sjxzq" || typeCode=="djxzq" || typeCode=="xjxzq" || typeCode=="xjxzq1"){//行政区划
    rows = 10;
  }
  let params = {
    typeCode : typeCode,//三级数据类别（数据表）code
    versionCode : versionCode,//版本号
    page:page,//页码
    rows:rows,//分页数据量
  }
  console.log("params");
  console.log(params);
  //查询版本号对应图层数据
  queryDataByVersionCode(params).then((response) => {
    nextTick(() => {
      console.log("查询版本号对应图层数据结果");
      console.log(response.data);
      let resultList = response.data;//data,title,page,rows,total,totalPage
      let totalPage = resultList.totalPage;
      allTableDataList.value = resultList.data;//图层表格数据列表
      allTableTitleList.value = resultList.title;//表头字段列表
      total.value = resultList.total;//总数据量
      //图层数据
      let tempArray = tempAllTableDataList.value;
      if(resultList.data!=null && resultList.data.length>0){
        tempAllTableDataList.value = tempArray.concat(resultList.data);
      }
      if(page<totalPage){
        page = page + 1;
        //分页循环查询获取全部数据
        getAllDataByPage(typeCode,versionCode,page,row,spatialBool);
      }else{
        allTableDataList.value = tempAllTableDataList.value;//图层表格数据列表
        allTableTitleList.value = resultList.title;//表头字段列表
        allTableDataBool.value = true;
        let radioLabel = activeRadioLabel.value;
        if(spatialBool){//空间数据
          allListData.value = [radioLabel,row.versionCode,tempAllTableDataList.value,true];//显示图层数据列表
        }
        loading.value = false;
      }
    });
  }).catch(err => {
    loading.value = false;
  });
}

//根据ID查询数据属性表
const getDetailDataById = (temp)=>{
  console.log("开始根据ID查询数据属性表");
  let typeCode = temp.typeCode;
  let id = temp.id;
  let params = {
    typeCode : typeCode,//三级数据类别（数据表）code
    id : id,
  }
  allTableDataBool.value = false;
  allTableDataList.value = [];//清空根据ID查询数据属性表
  allTableTitleList.value = [];
  //获取数据图层名称
  currentLayerName.value = getDictItemNameByCode(typeCode);
  //当前数据类型code
  currentLayerCode.value = typeCode;
  //当前数据版本号
  currentVersionCode.value = "";
  //选中1条数据的ID
  selectId.value = id;
  //是否为空间数据
  isSpatialDataBool.value = true;
  if(temp.database=="datacenter") {//基础数据系统
    //根据ID查询数据属性表
    queryDataById(params).then((response) => {
      nextTick(() => {
        console.log("根据ID查询数据属性表");
        console.log(response.data);
        let resultList = response.data;//data,title
        allTableDataList.value = [resultList.data];
        allTableTitleList.value = resultList.title;//表头字段列表
        allTableDataBool.value = true;
        total.value = 1;
      });
    });
  }
}

//根据三级数据类别（数据表）code获取数据图层名称
const getDictItemNameByCode = (typeCode) => {
  let dictItemName = "";
  let list = typeCodeDataList.value;
  for(let i=0;i<list.length;i++){
    if(list[i].dictItemCode==typeCode){
      dictItemName = list[i].name;
      break;
    }
  }

  return dictItemName;
}

function admin(){
  const userId = getUserId()
  getAdmin({userId:userId}).then(res=>{
    isAllAdmin.value = res.data.isCountry;
    isCountryId.value = res.data.provinceId
  })
}

const showHideLegendDivBool = ref(false);//是否显示图例
const layerShowHideArray = ref([]);//图层是否显示数组
function setLayerShowHideArray(){
  let showHideArray = [];
  let dataTypeArray = dataTypeInfoArray.value;
  for(let i=0;i<dataTypeArray.length;i++){
    let item = dataTypeArray[i];
    showHideArray.push({ code: item.code, name: item.name, show:false,legendHtml:"" });
  }
  layerShowHideArray.value = showHideArray;
}
//图例
const getLegendHtml = (obj)=>{
  //图层显示隐藏数组
  let showHideArray = layerShowHideArray.value;
  if(obj!=null){
    for(let i=0;i<showHideArray.length;i++){
      if(showHideArray[i].name==obj.name){
        showHideArray[i].show = obj.show;
        showHideArray[i].legendHtml = obj.legendHtml;//显示图例
        break;
      }
    }
    //是否显示图例
    let bool = false;
    for(let i=0;i<showHideArray.length;i++){
      if(showHideArray[i].show){
        bool = true;
        break;
      }
    }
    showHideLegendDivBool.value = bool;
  }else{//清空图例
    //是否显示图例
    for(let i=0;i<showHideArray.length;i++){
      showHideArray[i].show = false;
    }
    showHideLegendDivBool.value = false;
  }
}

//获取数据类型二级
const getLevel2DataType = watch(() => props.dataType, value => {// watch函数监听props.dataType
  if(value){
    level2DataType.value = value;
    getAllTreeData(value);
  }
},{immediate:true});

onMounted(async() => {
  await admin();
  await getProvinceData();
  await setLayerShowHideArray();
  await alertSelect();
  setTimeout(()=>{
    isAdminCountryId1();
  },500);
})
</script>

<style scoped lang="scss">
.mapDiv {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}
.select{
  position:absolute;
  top:29px;
  left:29px;
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .selectData{
    color: darkolivegreen;
    width: 150px;
    height: 40px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
    /*border:1px solid #707070;*/
    padding: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 4px;
  }
}

.box {
  position:absolute;
  top:70px;
  left:29px;
  width: 400px;
  bottom:17px;
  background-color: #fff;
  transition: height 0.3s ease;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
}

.box-max {
  width: 820px;
}

.box-min {
  width: 400px;
}

.box-hide-div {
  position:absolute;
  top:80px;
  left:29px;
  width:370px;
  height:130px;
  color:#fff;
  background: #000;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
  border:1px solid #707070;
  border-radius: 4px;
  opacity: 0.5;
}

.box-hide-div-label-span {
  position: absolute;top:10px;left:15px;font-weight: bold;font-size: 16px;
}

.box-hide-div-text-span {
  position: absolute;
  top: 40px;
  left: 15px;
  font-size: 14px;
  height: 80px;
  overflow: auto;
  right: 15px;
}

.tab-div {
  position:absolute;top:0px;left:0px;width:110px;height: 100%;border-right: 1px solid #d8dce5;
}
.tab-button {
  position:relative;top:0px;left:0px;width:100%;height:50px;line-height: 50px;text-align: center;
}
.tab-active {
  color:#fff;
  background:#107ce5;
}
.tab-no {
  color:#666;
  background:#fff;
}

.tab-content-all-div {
  position:absolute;top:0px;left:110px;width:290px;height: 100%;
}

.tab-content {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

.tab-span {
  float: right;margin:10px;color: #107ce5;cursor: pointer;font-size: 14px;
}

.tab-layercollapse-allShow {
  position: absolute;top: 80px;width:100%;bottom:0px;
}

.tab-layercollapse-allShow-head {
  width:100%;height:40px;background:#fff;
}

.tab-layercollapse-allHide {
  width:100%;background:rgb(230 242 253);min-height: 80px;max-height:200px;border-top: 1px solid #d8dce5;overflow:auto;
}

.tab-layercollapse-allHide-label-span{
  position: relative;top:10px;left:20px;font-weight: bold;font-size: 16px;
}
.tab-layercollapse-allHide-text-span {
  position: relative;margin-top: 20px;left:20px;font-size: 14px;width: 250px;display: block;
}

.tab-layercollapse-div{
  position: absolute;top: 40px;width:100%;bottom:0px;overflow:auto;
}

.foot-div {
  position:absolute;left:0px;bottom:0px;width:400px;height:40px;border-top:1px solid #d8dce5;cursor: pointer;
}

.tab-select-versionCode-div {
  position: absolute;top:0px;left:400px;width:420px;bottom:0px;background:#fff;
  border-left:1px solid #d8dce5;padding:10px;
}

.tab-collapse-radioDiv{
  padding-left:20px;
}

.tab-table-div {
  position:absolute;top:102px;left:0px;width:100%;bottom: 0px;overflow: auto;
}

:deep(.el-collapse-item__header) {
  background-color: rgb(230 242 253) !important;
  padding-left: 10px;
  font-size: 14px;
  color: #475767;
}

:deep(.el-collapse-item__content) {
  padding-top: 20px;
  padding-bottom: 20px;
}

// 深度选择器 去掉表头全选按钮
:deep(.el-table__header-wrapper .el-checkbox) {
  display: none;
}

//图例
.layerMap-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 50px;
  background: #fff;
  padding: 10px;
  overflow: auto;
  min-width: 200px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.layerMap-legend p:first-child{
  text-align: center;font-weight: bold;
}

</style>